<template>
  <v-spacer class="pl-10 pt-4 Customer-Container">
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Prospect</v-col>
        <v-col :cols="3" :offset="1">
          <v-text-field
            v-model="propItems.prospect"
            v-validate="'required'"
            name="Prospect"
            disabled
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Prospect") }}
          </span>
        </v-col>
        <v-col class="flex-grow-0 ml-1">
          <v-tooltip content-class="tooltip" right>
            <template v-slot:activator="{ on }">
              <v-icon
                v-on="on"
                @click="openSelect"
                small
                color="#79839B"
                class="pointer search-icon"
              >
                mdi-magnify
              </v-icon>
            </template>
            Select Prospect
          </v-tooltip>
        </v-col>
        <v-col class="flex-grow-0 ml-3">
          <v-tooltip content-class="tooltip" right>
            <template v-slot:activator="{ on }">
              <v-icon
                v-on="on"
                @click="goCustomer"
                small
                color="#79839B"
                class="pointer rotate"
              >
                mdi-account-plus
              </v-icon>
            </template>
            Go Add New Prospect
          </v-tooltip>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Prospect Name </v-col>
        <v-col :offset="1">
          <v-textarea
            v-model="propItems.prospectName"
            v-validate="'required'"
            name="Prospect Name"
            disabled
            no-resize
            rows="2"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-textarea>
          <span class="vee-validate-error">
            {{ errors.first("Prospect Name") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Contact Person</v-col>
        <v-col :offset="1">
          <v-text-field
            v-model="propItems.contactPerson"
            v-validate="'required'"
            name="Contact Person"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Contact Person") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Job Title</v-col>
        <v-col :offset="1">
          <v-text-field
            v-model="propItems.jobTitle"
            v-validate="'required'"
            name="Job Title"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Job Title") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Email</v-col>
        <v-col :offset="1">
          <v-text-field
            v-model="propItems.email"
            v-validate="'required|email'"
            name="Email"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Email") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Mobile</v-col>
        <v-col :offset="1">
          <v-text-field
            v-model="propItems.mobile"
            v-validate="'required|mobile'"
            name="Mobile"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Mobile") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Work</v-col>
        <v-col :offset="1">
          <v-text-field
            v-model="propItems.work"
            v-validate="'required'"
            name="Work"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Work") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col :cols="7" class="py-2">
      <v-row no-gutters>
        <v-col :cols="2">Fax</v-col>
        <v-col :offset="1">
          <v-text-field
            v-model="propItems.fax"
            v-validate="'required'"
            name="Fax"
            solo
            dense
            hide-details
            class="gray-input"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Fax") }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <Select
      :show.sync="showSelect"
      :show-save="false"
      :headers="prospectHeaders"
      :items="prospectItems"
      @select="selectProspect"
      title="Select prospect"
      width="904"
    ></Select>
  </v-spacer>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Select from "@/components/Quotation/Dialog/Select/Select.vue";
interface IProspect {
  id: string;
  contactCode: string;
  name: string;
}
@Component({
  components: {
    Select,
  },
  props: {
    items: {
      type: Object,
      default: () => ({}),
    },
  },
})
export default class Customer extends Vue {
  get propItems() {
    return this.$props.items;
  }
  // select
  showSelect = false;
  openSelect() {
    this.showSelect = true;
  }

  closeSelect() {
    this.showSelect = false;
  }

  selectProspect(item: IProspect) {
    const { contactCode: prospect, name: prospectName } = item;
    Object.assign(this.propItems, { prospect, prospectName });
    this.closeSelect();
  }
  prospectHeaders = [
    {
      text: "Contact Code",
      value: "contactCode",
    },
    {
      text: "Name",
      value: "name",
    },
  ];
  prospectItems: IProspect[] = [
    {
      id: "1",
      contactCode: "PP-22015",
      name: "Cafe de Coral",
    },
    {
      id: "2",
      contactCode: "PP-22016",
      name: "Tai Hing",
    },
  ];

  goCustomer() {
    this.$router.push({
      name: "ProspectCustomer",
    });
  }
}
</script>
<style lang="scss" scoped>
@import "./Customer.scss";
</style>
